<template>
  <div style="padding: 20px">
    <Alert message="结果示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>status: success | error | info | warning | 404 | 403 | 500，默认info</div>
        <div>title: 标题</div>
        <div>sub-title: 辅助文字</div>
        <div>icon插槽template #icon，可自定义图标</div>
        <div>extra操作插槽</div>
      </template>
    </Alert>
    <div class="demoTittle">结果</div>
    <div class="demoTittle2 marginBtm18">- 用于对用户的操作结果或者异常状态做反馈。</div>
    <a-space :size="30">
      <a-result
        status="success"
        title="成功提示"
        sub-title="超长辅助文字介绍超长辅助文字介绍超长辅助文字介绍超长辅助文字"
      >
        <template #icon>
          <img :src="success" alt="成功" />
        </template>
        <template #extra>
          <a-button key="console" type="primary">返回</a-button>
        </template>
      </a-result>
      <a-result
        status="success"
        title="警告提醒"
        sub-title="超长辅助文字介绍超长辅助文字介绍超长辅助文字介绍超长辅助文字"
      >
        <template #icon>
          <img :src="warning" alt="警告" />
        </template>
        <template #extra>
          <a-button key="console" type="primary">返回</a-button>
        </template>
      </a-result>
      <a-result
        status="success"
        title="警告提醒"
        sub-title="超长辅助文字介绍超长辅助文字介绍超长辅助文字介绍超长辅助文字"
      >
        <template #icon>
          <img :src="error" alt="失败" />
        </template>
        <template #extra>
          <a-button key="console" type="primary">返回</a-button>
        </template>
      </a-result>
      <a-result
        status="success"
        title="一般提示"
        sub-title="超长辅助文字介绍超长辅助文字介绍超长辅助文字介绍超长辅助文字"
      >
        <template #icon>
          <img :src="info" alt="一般" />
        </template>
        <template #extra>
          <a-button key="console" type="primary">返回</a-button>
        </template>
      </a-result>
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import success from '@/assets/images/success.png';
  import warning from '@/assets/images/warning.png';
  import error from '@/assets/images/error.png';
  import info from '@/assets/images/info.png';
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }
  .marginBtm18 {
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }
</style>
